<template>
  <div>
    <button 
     v-for = "item in total"
     :key = "item" 
     :class = "{ active : currentPage === item}"
     @click = "changeCurrentPage(item)"
     >
        {{item}}
    </button>

    <span>每页{{limit}}条</span>
    <select @change= "changeLimit(+$event.target.value)">
        <option v-for = "item in limitList" :key = "item" :value ="item">
            每页{{item}}条
        </option>
    </select>
  </div>
</template>

<script>
/* 
  页码组件希望接受数据:
    1. 当前页 currentPage
    2. 总页数 total
    3. 每页条数 limit
    4. 每页条数选项 limitList 
*/
export default {
    name:"Pagination",
    props:[
        "currentPage",
        "total",
        "limit",
        "limitList",
        "changeCurrentPage",
        "changeLimit",
    ],
}
</script>
<style scoped>
    .active{
        background: yellow;
    }
</style>